<template>
  <div class="wrap">
    <div class="person-wrap flex justify-between">
      <div class="seeing-wrap flex justify-between">
        <div class="see-video">
          <h3 class="see-video-title">
            <span class="color-title font-md font-bolder">
              {{ special.title }}
            </span>
            <span class="see-video-tips font">
              {{ special.introduce }}
            </span>
          </h3>
          <img class="video" :src="special.cover_url" alt="" />
        </div>
        <div class="see-text">
          <div class="color-title see-title font-m font-normal">本期看点</div>
          <div class="see-tips">
            <p
              class="text-ellipsis"
              v-for="(item, index) in special.item"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
        </div>
      </div>
      <div class="profile-wrap flex justify-between">
        <div class="profile-img">
          <img :src="special.about" alt="" />
        </div>
      </div>
    </div>
    <div class="list-wrap" :style="{height:state.height+'px'}">
      <Card :cardList="list"></Card>
    </div>
    <div class="more-btn" @click="loadingMore">·
      <img src="@/assets/images/ppp/bottom.png" alt="" v-if="!state.isDown" />
      <img src="@/assets/images/ppp/top.png" alt="" v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Card from "@/components/Card.vue";
import {reactive, toRefs, } from "vue";

const props = defineProps({
  special: {
    type: Object,
    default: {},
  },
  list: {
    type: Array,
    default: [],
  },
});

const { list } = toRefs(props)

const state:any = reactive({
  isDown:false,
  height:"320",
  
})

// 加载更多
const loadingMore = () => {
  state.isDown = !state.isDown;
  if(list.value.length && state.isDown){
    const row = Math.ceil(list.value.length / 3); 
    state.height = row * 336;
  }else{
    state.height = 320;
  } 
}
</script>

<style scoped>
/* 彩色文字 */
.color-title {
  background: linear-gradient(0deg, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 视频介绍 */
.seeing-wrap {
  width: 816px;
}
.see-video {
  width: 578px;
}
.see-video-title {
  height: 40px;
  line-height: 40px;
}
.see-video-tips {
  margin-left:16px;
  color: #848484;
}
.video {
  width: 578px;
  height: 325px;
  border-radius: 12px;
  border: 2px solid #000;
  overflow: hidden;
}
.see-text {
  margin-top: 40px;
  padding: 30px 15px;
  width: 230px;
  height: 326px;
  background: #f0f0f0;
  border-radius: 12px;
}
.see-title {
  margin-bottom: 34px;
}

/* 需要>>> */
.see-tips p {
  margin-bottom: 20px;
}

/* 人物简介 */
.profile-wrap {
  position: relative;
  padding-top: 27px;
  width: 640px;
}
.profile-img {
  width: 650px;
  height: 338px;
}
.profile-img img {
  display: block;
  width: 100%;
  height: 100%;
  /* background: red; */
}
/* 需要>>> */
.profile-tips p {
  line-height: 24px;
  color: #626675;
}

.list-wrap {
  margin-top: 47px;
  transition: all ease-out 0.3s;
  overflow:hidden;
}

/*加载更多*/
.more-btn {
  position: relative;
  margin: 0 auto;
  margin-top:20px;
  width: 296px;
  height: 46px;
  line-height: 46px;
  display: block;
  font-size: 14px;
  text-align: center;
  border: #c6c6c6 1px solid;
  border-radius: 12px;
  transition: all ease-out 0.3s;
  cursor: pointer;
}
.more-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 296px;
  height: 46px;
  line-height: 46px;
  border: 2px solid #626675;
  opacity: 0;
  transition: all 0.5s ease 0s;
  margin: 0 auto;
  text-align: center;
  transform: scale(1, 1);
  margin-left: -3px;
  border-radius: 90px;
}

.more-btn:hover {
  color: #5e5e5e;
  border-color: transparent;
}
.more-btn:hover::after {
  opacity: 1;
  transform: rotateX(180deg);
}
.more-btn img {
  display: inline-block;
  width: 19px;
  height: 14px;
}
</style>
